<template>
  <div id="login">
    <div class="container">
      <br /><br /><br />
      <div class="logo">
        <img
          src="@/assets/images/supercamel.png"
          style="display: block; margin: 0 auto;"
        />
      </div>
      <a-tabs
        :active-key="customActiveKey"
        size="small"
        :tab-bar-style="{
          textAlign: 'left',
          borderBottom: 'unset',
          marginTop: '30px',
        }"
        @change="handleTabClick"
      >
        <a-tab-pane key="tab1" tab="短信验证登录">
          <temLogin @ok="turnPage" />
        </a-tab-pane>
        <a-tab-pane key="tab2" tab="密码登录">
          <weekLogin @ok="turnPage" />
        </a-tab-pane>
      </a-tabs>
      <div style="margin: auto; margin-top: 60px; text-align: center;">
        成都省心配出品
      </div>
    </div>
  </div>
</template>
<script>
import weekLogin from "./week"
import temLogin from "./tmp"
import tokenRefresh from "@/utils/token-refresh"

export default {
  components: {
    weekLogin,
    temLogin,
  },
  data() {
    return {
      customActiveKey: "tab1",
      logoUrl: undefined,
    }
  },
  mounted() {
    let refreshToken = this.$token.getRefreshToken()
    if (refreshToken) {
      tokenRefresh().then((code) => {
        if (code == 200) {
          this.$message.success("登录成功，页面跳转中.....")
          setTimeout(() => {
            this.turnPage()
          }, 600)
        }
      })
    }
  },
  methods: {
    handleTabClick(key) {
      this.customActiveKey = key
    },
    turnPage() {
      const path = this.$route.query.redirect
        ? this.$route.query.redirect
        : "/home"

      this.$router.to(path)
      return
    },
  },
}
</script>
<style lang="less" type="text/less" scoped>
#login {
  background-color: rgba(240, 243, 247, 1);
  background-size: cover;
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  .container {
    margin: auto;
    margin-top: 60px;
    width: 368px;

    .app {
      padding: 60px;
    }

    .qrcode {
      width: 200px;
      height: 200px;
      margin: auto;
      margin-top: 10px;
    }

    .logo {
      margin-left: auto;
      margin-right: auto;
    }
  }

  .app {
    background: #fff;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 5px #ddd;
    box-shadow: 0 0 5px #ddd;
    padding: 10px;
  }
}

/*
@media only screen and (max-width: 1200px) {
}


@media only screen and (max-width: 980px) {
  #login {
    .container {
      width: 500px;

      .app {
        padding: 30px;
      }

      .logo {
        height: 80px;
        text-align: center;
      }
    }
  }
}

@media only screen and (max-width: 640px) {
  #login {
    .container {
      width: 100%;
      min-width: 280px;

      .app {
        padding: 10px;
        margin: 10px;
        padding-top: 20px;
      }

      .logo {
        height: 80px;
        text-align: center;
      }
    }
  }
}
*/
</style>
